
(function(Vue){
  Vue.component("home",{
    template:`
    <h1>主页组件</h1>
    `
  });
  Vue.component("product",{
    template:`
    <h1>产品组件</h1>
    `
  });
  Vue.component("profile",{
    template:`
    <h1>公司介绍</h1>
    `
  });
  let router = [
    {
      path:"/home",
      component:"home"
    },
    {
      path:"/product",
      component:"product"
    },
    {
      path:"/profile",
      component:"profile"
    }
  ];
  // 添加 hash change 监听事件
  window.addEventListener("hashchange",function(e){
    // console.log(e);
    console.log(window.location.hash);
    let path = window.location.hash.split("#")[1]; ///product /profile /hpme
    // 寻找路由对应配置项
    let router_item=router.find(v=>{
      if(v.path === path){
        return true;
      }
    })
    console.log(router_item);
    console.log(vm);
    console.log(vm.componentId);
    vm.componentId = router_item.component;
  });
})(Vue);